<template>
  <div>
    <!-- 走马灯 -->
    <div>
      <div>
        <Carousel
          v-model="value2"
          :radius-dot="true"
          :autoplay-speed="2000"
          :autoplay="true"
          :loop="true"
        >
          <CarouselItem
            v-for="(item_2, index_2) in this.Data_Runner"
            :key="index_2"
          >
            <div class="demo-carousel">{{ item_2 }}</div>
          </CarouselItem>
        </Carousel>
      </div>
      <!-- 历史信息 -->
      <div class="diLan">
        <Badge :count="0">
          <Icon
            type="ios-notifications-outline"
            size="60"
            @click="value8 = true"
          ></Icon>
        </Badge>

        <Drawer
          title="历史面试反馈"
          placement="bottom"
          :closable="false"
          v-model="value8"
          :height="310"
        >
          <Row style="background: #eee; padding: 20px">
            <Col
              style="margin-top: 10px"
              v-for="(item, index) in History"
              :key="index"
              span="11"
              offset="1"
            >
              <Card :bordered="false">
                <p slot="title">面试官：{{ item["Interviewer"] }}</p>
                <a slot="extra">
                  面试时间：
                  {{ getTaskTime(item["InterviewTime"]) }}
                </a>
                <p>{{ item["InterviewTubeFeedback"] }}</p>
              </Card>
            </Col>
          </Row>
        </Drawer>
      </div>

      <Row justify="center">
        <!-- 求职者信息 -->
        <Col flex="auto">
          <h1 style="text-align: center; margin-top: 15px">您好，求职者</h1>
          <div class="Information">
            <div style="display: flex">
              <Tag class="name" color="green">{{ name }}</Tag>
              <Tag class="time" color="gold"
                >面试日期：{{ getTask(Countdown) }}</Tag
              >
            </div>
            <Tag class="Mian_name" color="orange"
              >面试官：{{ InterviewManagement_Name }}</Tag
            >
          </div>

          <!-- 面试状态 -->
          <div class="Status">
            <template>
              <Timeline>
                <TimelineItem>
                  <!-- v-bind:style="getStyle(1)" -->
                  <p class="time">
                    {{ this.getTaskTime(Countdown) }}
                  </p>
                  <p class="content">面试时间</p>
                </TimelineItem>
                <TimelineItem>
                  <!-- v-bind:style="getStyle(2)" -->
                  <p class="time">
                    {{ StartInterviewTime }}
                  </p>
                  <p class="content">面试官开始面试</p>
                </TimelineItem>
                <TimelineItem>
                  <!-- v-bind:style="getStyle(3)" -->
                  <p class="time">
                    {{ EndOfInterviewTime }}
                  </p>
                  <p class="content">面试管结束面试</p>
                </TimelineItem>
              </Timeline>
            </template>
          </div>
          <!-- 写反馈 -->
          <div
            style="
              text-align: center;
              margin-bottom: 20px;
              display: flex;
              flex-direction: row;
              align-items: center;
              justify-content: center;
            "
          ></div>
        </Col>

        <Col flex="100px">
          <!-- 反馈 -->
          <Row justify="center" style="padding-top: 20px; padding-right: 20px">
            <Col>
              <Input
                v-model="value_text"
                maxlength="400"
                show-word-limit
                type="textarea"
                :rows="10"
                placeholder="给出您最珍贵的反馈......"
                style="width: 400px"
              />

              <div style="padding: 20px">
                <Button @click="warning" type="primary" long>提交</Button>
              </div>
            </Col>
          </Row>
        </Col>
      </Row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value8: false,
      value2: 0,
      Data_Runner: [
        "Welcome 进入adalab模拟面试",
        "心态放平",
        "HI JAVA",
        "HI CODE",
      ],
      // 面试者名字
      name: "暂无面试",
      // 还有几天
      time: "",
      // 面试官
      InterviewManagement_Name: "请静期待",
      // 具体时间
      Countdown: "Countdown",
      // 开始面试时间
      StartInterviewTime: "还未进行",
      // 面试结束时间
      EndOfInterviewTime: "还未进行",
      // 状态
      Status: "null",
      id: "",
      count: 0,
      History: [],
      // 反馈
      value_text: "",
    };
  },

  created: function () {
    this.getHistory();
    this.Initialization();
    // this.getStyle();
  },
  methods: {
    // 反馈
    warning() {
      // 判断 StartInterviewTime 面试官是不是已经结束面试，如果结束面试，面试者才可以反馈
      if(this.Status == "false") {
        fetch("api/v1/Feedbackfromjobseekers", {
          method: "post",
          body: JSON.stringify({
            feedbackfromjobseekers: this.value_text,
            id: this.id,
          }),
          headers: {
            "Content-Type": "application/json",
          },
        }).then(function (data) {
          alert("提交成功！");
        });
      } else {
        alert("等待面试结束才能反馈哦！");
      }

    },
    // 面试开始提示框
    // success(nodesc) {
    //   this.$Notice.success({
    //     title: "面试状态",
    //     desc: nodesc ? "" : "面试已结束，请尽快填写面试反馈",
    //   });
    // },
    // 获取
    getStyle() {
      // console.log(this.History[0]["Interviewer"]);

      // if (this.Status == "null" && num == 1) {
      //   return { color: "cornflowerblue" };
      // } else
       if (this.Status == "true" ) {
        this.StartInterviewTime = "面试进行中";
        // return { color: "cornflowerblue" };
      } else if (this.Status == "false") {
        this.StartInterviewTime = "面试官已结束面试";
        this.EndOfInterviewTime = "静静的等待结果吧...";
        // if (this.count < 1) {
        //   this.count++;
        //   this.success(false);
        // }
        // return { color: "cornflowerblue" };
      }
      // this.Initialization();
    },
    //Thu Aug 18 20:38:54 CST 2016 时间转换
    getTaskTime(strDate) {
      if (strDate != "Countdown") {
        var date = new Date(strDate);
        // console.log(date);
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m < 10 ? "0" + m : m;
        var d = date.getDate();
        d = d < 10 ? "0" + d : d;
        var h = date.getHours();
        var minute = date.getMinutes();
        minute = minute < 10 ? "0" + minute : minute;
        var str = y + "-" + m + "-" + d + " " + h + ":" + minute;
        return str;
      } else {
        return "暂无面试";
      }
    },

    //Thu Aug 18 20:38:54 CST 2016 时间转换
    getTask(strDate) {
      if (strDate != "Countdown") {
        var date = new Date(strDate);
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m < 10 ? "0" + m : m;
        var d = date.getDate();
        d = d < 10 ? "0" + d : d;
        var h = date.getHours();
        var minute = date.getMinutes();
        minute = minute < 10 ? "0" + minute : minute;
        var str = y + "-" + m + "-" + d;
        return str;

      } else {
        return "暂无面试";
      }
    },
    // 请求
    async Initialization() {
      const res = await fetch("api/interviewee/getInterviewee").then((res) =>
        res.json()
      );
      this.Countdown = res["InterviewTime"];
      // console.log(res["Interviewer"]);
      this.InterviewManagement_Name = res["Interviewer"];
      // console.log(res["JobSeekers"]);
      this.name = res["JobSeekers"];
      // console.log(res["Status"]);
      this.Status = res["Status"];
      this.id = res["id"];
      this.getStyle();
      // console.log(this.id);
    },
    async getHistory() {
      const res = await fetch("api/interviewee/getHistory").then((res) =>
        res.json()
      );
      this.History = res;
      console.log(this.History[1]["Interviewer"]);
    },
  },
};
</script>

<style scoped>
.diLan {
  margin-top: 10px;
  margin-bottom: 10x;
  display: flex;
}
.Status {
  display: flex;
  justify-content: center;
  margin-top: 50px;
  margin-bottom: 10px;
}

.Information {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 30px;
}

/* .top_bar {
  background: #506b9e;
  width: 100%;
  height: 40px;
} */

.demo-carousel {
  width: 100%;
  line-height: 200px;
  text-align: center;
  color: #fff;
  font-size: 20px;
  background: #506b9e;
}

.name {
  width: 100px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.time {
  width: 100px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.Mian_name {
  width: 300px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.Back {
  background-color: #506b9e;
}

.time {
  font-size: 14px;
  font-weight: bold;
}

.content {
  padding-left: 5px;
}
</style>
